<template>
  <div>
    <el-image
      v-show="imgViewerVisible"
      style="width: 100px; height: 100px"
      ref="myImg"
      :preview-src-list="imgList"
    >
    </el-image>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgViewerVisible: false,
    };
  },
  watch: {
    showViewer: {
      handler: function (val, oldVal) {
        if (val) {
          this.checkView(val);
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  props: {
    //图片数据
    imgList: {
      type: Array,
      default: [],
    },
    showViewer: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    //预览
    checkView(flag) {
      this.$refs.myImg.showViewer = flag;
      this.$emit("closeImg", false);
    },
  },
};
</script>

<style>
</style>